<template>
  <div class="tag-factory">
    <factory-config-list
      ref="factoryConfigList"
      @addItem="addItem"
      @clearConfig="clearConfig"
      :preview="preview"
    ></factory-config-list>
    <factory-content ref="factoryContent"></factory-content>
  </div>
</template>

<script>
import factoryConfigList from './factory-config-list'
import factoryContent from './factory-content'
export default {
  components: {
    factoryConfigList,
    factoryContent
  },
  data() {
    return {
      preview: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.query.tagId)
        this.$refs.factoryContent.getDetail({ tagId: this.$route.query.tagId, groupId: this.$route.query.groupId })
      if (this.$route.query.groupId) this.$refs.factoryContent.updateGroup(this.$route.query.groupId)
      this.watchPreview()
    })
  },
  methods: {
    addItem(item) {
      this.$refs.factoryContent.addItem(item)
    },
    clearConfig() {
      this.$refs.factoryContent.clearConfig()
    },
    getCatalogClass() {
      return this.$refs.factoryConfigList.getCatalogClass()
    },
    changeCatalogClass(catalogClassId) {
      this.$refs.factoryConfigList.changeCatalogClass(catalogClassId)
    },
    watchPreview() {
      this.$watch(
        '$refs.factoryContent.$ref.factoryCust.showCust',
        val => {
          this.preview = val
        },
        {
          deep: true,
          immediate: true
        }
      )
    }
  }
}
</script>

<style lang="scss"></style>
